<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <header>
    <div class="wrapper">
      <nav>
        <RouterLink to="/">首页</RouterLink>
        <RouterLink to="/studemo1">选项式API</RouterLink>
        <RouterLink to="/studemo2">组合式API</RouterLink>
        <RouterLink to="/studemo3">组合式API-自定义渲染-返回函数</RouterLink>
        <RouterLink to="/studemo4">组合式API-自定义渲染-JSX</RouterLink>
        <RouterLink to="/studemo5">setup 语法糖</RouterLink>
        <RouterLink to="/studemo6">setup 语法糖（ts）</RouterLink>
        <RouterLink to="/studemo21">模板语法-文本</RouterLink>
        <RouterLink to="/studemo22">模板语法-属性</RouterLink>
        <RouterLink to="/studemo23">内置指令</RouterLink>
        <RouterLink to="/studemo24">绑定 HTML class</RouterLink>

        <RouterLink to="/studemo25">绑定内联样式 Style</RouterLink>


        <RouterLink to="/StuDemo501">使用内置的 fetch API 进行请求</RouterLink>
        <RouterLink to="/studemo502"> axios 安装和使用 </RouterLink>


        <RouterLink to="/studentcase">学生管理系统</RouterLink>

        <RouterLink to="/StuDemo1">组件注册</RouterLink>


        <RouterLink to="/onMountedExample01">数据初始化加载</RouterLink>

        <hr>

        <RouterLink to="/BasicsLearning01">模板语法</RouterLink>
        <RouterLink to="/BasicsLearning02">响应式基础</RouterLink>

        <hr>
        <RouterLink to="/vueTest001">机试题1、计数器</RouterLink>
        <RouterLink to="/vueTest002">机试题2、表单输入展示</RouterLink>
        <RouterLink to="/vueTest003">机试题3、待办事项列表</RouterLink>
        <RouterLink to="/vueTest004">机试题4、购物车</RouterLink>

        <RouterLink to="/vueTest101">任务管理器</RouterLink>
        <RouterLink to="/vueTest102">用户反馈表单</RouterLink>
        <RouterLink to="/vueTest103">留言板系统</RouterLink>

        <hr>
        <RouterLink to="/Game01">角色管理系统</RouterLink>
        

      </nav>
    </div>
  </header>

  <RouterView />
</template>

<style scoped lang="scss">
header {
  border-bottom: 1px solid var(--color-border2);
  padding: 10px 0;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;

  a {
    display: inline-block;
    padding: 0 1rem;
    border-left: 1px solid var(--color-border);
    color: blue;
    margin: 5px 0;
  }
}
</style>
